<template>
	<view class="page">
		<view class="page-content">
			<view class="fui-wrap">
				<fui-form ref="formRef" top="0" :show="false" :model="formData">
					<view class="" v-if="!currPage">
						<fui-form-item label="商品分类" @click="showStatus = true" arrow class="form-item"
							:padding="['30rpx', '32rpx', '30rpx']" prop="categoryName">
							<fui-input size="28" disabled :padding="[0]" :borderBottom="false" placeholder="请选择商品分类"
								v-model="formData.categoryName">
							</fui-input>
						</fui-form-item>
						<fui-form-item prop="name" :bottomBorder='false'>
							<view class="text">商品名称</view>
							<fui-textarea min-height="96rpx" :borderTop="false" :borderBottom="false" radius="16"
								placeholder="请输入商品名称" maxlength="50" isCounter v-model="formData.name">
							</fui-textarea>
						</fui-form-item>

						<fui-form-item label="单位" bottomBorder :padding="['0','32rpx','18rpx','32rpx']"
							@click="showUnit = true" arrow class="form-item categoryName-class" prop="unit">
							<fui-input :padding="[0]" size="28" disabled :borderBottom='false' placeholder="请选择单位"
								v-model="formData.unit">
							</fui-input>
						</fui-form-item>

						<fui-form-item label="发货地" bottomBorder :padding="['0','32rpx','18rpx','32rpx']"
							@click="showDispatch = true" arrow class="form-item categoryName-class" prop="unit">
							<fui-input :padding="[0]" size="28" disabled :borderBottom='false' placeholder="请选择发货地"
								v-model="formData.fhdName">
							</fui-input>
						</fui-form-item>

						<fui-form-item label="成本价格" bottomBorder :padding="['0','32rpx','18rpx','32rpx']" prop="costPrice">
							<fui-input type="digit" class="input" :borderBottom="false" :padding="[0]"
							size="28" placeholder="请输入成本价格" v-model="formData.costPrice" :max="99999" @input="onChangePrice($event, 'costPrice')"></fui-input>
						</fui-form-item>

						<fui-form-item label="运费模板" bottomBorder :padding="['18rpx','32rpx']"
							@click="showCarriagePicker = true" arrow class="form-item categoryName-class" prop="unit">
							<fui-input :padding="[0]" size="28" disabled :borderBottom='false' placeholder="请选择运费模板"
								v-model="formData.yfmbName">
							</fui-input>
						</fui-form-item>

						<fui-form-item v-if="showWeightField" label="物流重量" bottomBorder :padding="['0','32rpx','18rpx','32rpx']" prop="wlzl">
							<fui-input type="digit" class="input" :borderBottom="false" :padding="[0]"
								size="28" placeholder="请输入物流重量" v-model="formData.wlzl" :max="99999" @input="onChangeWeight">
								<fui-text :text="`kg/${formData.unit || '件'}`" size="24" color=""></fui-text>
							</fui-input>
						</fui-form-item>

						<view class="price-view">
							<view class="price-title">商品价格组</view>
							<view class="price-list" v-for="item in formData.prices" :key="item.code">
								<view class="price-list-view">
									起售数量：
									<span class="price-text">{{ item.startNum }}</span>
									<span>{{formData.unit}}</span>
								</view>
								<view class="price-list-view">
									起售价格：
									<span class="price-text">{{utils.moneyFormatter(item.price / 100) }}</span>
									<span>元</span>
								</view>
								<!-- <view class="price-list-view">
									成本价格：
									<span class="price-text">{{ utils.moneyFormatter(item.costPrice / 100) }}</span>
									<span>元</span>
								</view> -->
								<view class="price-delete">
									<fui-icon name="minussign-fill" color="#F95A5A" :size="30"
										@click="deletePrice(item)">
									</fui-icon>
								</view>
							</view>
							<fui-button v-show="formData.prices.length < 5" background="#ecf4ff" border="8rpx"
								color="var(--fui-color-primary)" width="320rpx" height="78rpx" :margin="['48rpx', 'auto', '0', 'auto']"
								@click="addPrice">
								+ 添加价格组
							</fui-button>
						</view>

						<view class="price-view">
							<view class="price-title">商品属性</view>
							<view class="price-list" v-for="item in formData.basics" :key="item.code">
								<view class="price-list-view">
									属性名称：
									<span class="price-text">{{ item.name }}</span>
								</view>
								<view class="price-list-view">
									属性值：
									<span class="price-text">{{ item.value }}</span>
								</view>

								<view class="price-delete">
									<fui-icon name="minussign-fill" color="#F95A5A" :size="30"
										@click="deleteBasics(item)">
									</fui-icon>
								</view>
							</view>
							<fui-button background="#ecf4ff" border="8rpx" color="var(--fui-color-primary)" width="320rpx" height="78rpx"
								:margin="['48rpx', 'auto', '0', 'auto']" @click="isAddStatsShow =true">
								+ 添加商品属性
							</fui-button>
						</view>
						<view class="ui-fixed-footer">
							<fui-button text="下一步" height="78rpx" @click="nextPage"></fui-button>
						</view>
					</view>

					<view class="" v-else>
						<fui-form-item prop="afterSaleAlert">
							<view class="text">售后须知</view>
							<fui-textarea min-height="96rpx" radius="16" placeholder="请输入售后须知" maxlength="200" isCounter
								v-model="formData.afterSaleAlert">
							</fui-textarea>
						</fui-form-item>
						<fui-form-item prop="tradeAlert" class="padding-bottom">
							<view class="text">交易须知</view>
							<fui-textarea min-height="96rpx" radius="16" placeholder="请输入交易须知" maxlength="200" isCounter
								v-model="formData.tradeAlert">
							</fui-textarea>
						</fui-form-item>

						<fui-form-item :bottomBorder="false" class="form-item1 padding-bottom"
							:padding="['32rpx', '32rpx', '16rpx']" prop="description">
							<view class="text">商品详情</view>
							<fui-textarea min-height="96rpx" radius="16" placeholder="请输入商品详情" maxlength="200" isCounter
								v-model="formData.description">
							</fui-textarea>
							<template #vertical>
								<UploadImage :defaultList='formData.picUrl' :max="15" @uploaded="uploadedImage">
								</UploadImage>
							</template>
						</fui-form-item>

						<fui-form-item :bottomBorder="false" class="form-item1" label="商品轮播图"
							:padding="['32rpx', '32rpx', '16rpx']" prop="sliderPicUrls">
							<template #vertical>
								<UploadImage :defaultList='formData.sliderPicUrls' :max="10"
									@uploaded="uploadedSlideshow"></UploadImage>
							</template>
						</fui-form-item>

						<view class="ui-fixed-footer">
							<fui-button text="上一步" class="page-btn btn-back" bold @click="currPage = 0"></fui-button>
							<fui-button text="保存" class="page-btn" bold @click="submit"></fui-button>
						</view>
					</view>
				</fui-form>
			</view>
			<!-- 选择弹窗 商品分类 -->
			<fui-picker layer="3" @cancel="showStatus = false" :fields="['name', 'id', 'children']" radius
				:options="statusList" linkage :show="showStatus" @change="changeStatus"></fui-picker>
			<!-- 选择弹窗 单位 -->
			<fui-picker layer="1" @cancel="showUnit = false" :fields="['label', 'label']" radius :options="unitList" linkage :show="showUnit"
				@change="changeUnit"></fui-picker>
			<!-- 选择弹窗 发货地 -->
			<fui-picker layer="1" @cancel="showDispatch = false" :fields="['deliveryPlace', 'id']" radius :options="dispatchList" linkage :show="showDispatch"
				@change="changeDispatch"></fui-picker>
			<!-- 选择弹窗 运费模板 -->
			<fui-picker layer="1" @cancel="showCarriagePicker = false" :fields="['name', 'id']" radius :options="carriageList" linkage :show="showCarriagePicker"
				@change="changeCarriage"></fui-picker>
			<!-- 弹窗 添加价格组  -->
			<fui-bottom-popup :show="isPriceShow" @close="isPriceShow=false">
				<AddPrices @closeAddPrices="closePop"></AddPrices>
			</fui-bottom-popup>
			<!-- 弹窗 添加商品属性  -->
			<fui-bottom-popup :show="isAddStatsShow" @close="isAddStatsShow = false">
				<AddStats @closeStatsPop="closeStatsPop"></AddStats>
			</fui-bottom-popup>
		</view>
	</view>
</template>

<script setup>
	import PageHeader from '@/components/header';
	import {
		ref,
		reactive,
		inject,
		watch,
		computed
	} from 'vue';
	import { setTitle } from '@/utils/common';
	import UploadImage from '@/components/upload/image';
	import AddPrices from './addPrices';
	import AddStats from './addStats';
	import appApi from '@/api/app';
	import goodsApi from '@/api/goods';
	import carriageApi from '@/api/carriage';
	import utils from '@/components/firstui/fui-utils'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex';
	const store = useStore();

	const modal = inject('$modal');
	const formRef = ref(null);

	// 商品分类选择
	const showStatus = ref(false); //商品分类
	const showUnit = ref(false); //单位
	const isAddStatsShow = ref(false); //显示商品分类

	const statusList = ref([]); //商品分类

	// 单位列表
	const unitList = ref([]);
	const getGoodsUnitList = async () => {
		try {
			await appApi.getDictionaryData('product_unit').then(res => {
				if (res.code === 0) {
					unitList.value = res.data || []
				} else {
					modal.msgError('获取商品单位数据失败!')
				}
			})
		} catch (err) {
			modal.msgError(err)
		}
	}

	const onChangePrice = async (value, feild) => {
		if (value <= 0) {
			modal.msgError('价格必须大于0！')
			formData.value[feild] = await ''
		} else if (value.toString().indexOf('.') > -1) {
			formData.value[feild] = await (value * 1).toFixed(2)
		}
	}

	const onChangeWeight = async (value) => {
		if (value <= 0) {
			modal.msgError('物流重量必须大于0！')
			formData.value.wlzl = await ''
		} else if (value.indexOf('.') > -1) {
			formData.value.wlzl = await (value * 1).toFixed(1)
		}
	}

	// 发货地
	const showDispatch = ref(false) //商品分类
	const dispatchList = ref([])
	const getDispatchList = async () => {
		try {
			await goodsApi.getDispatchList({
				pageNo: 1,
				pageSize: -1,
				supplierId: store.getters.companyId
			}).then(res => {
				if (res.code === 0 && res.data) {
					dispatchList.value = res.data.list || []
				} else {
					modal.msgError('获取发货地数据失败!')
				}
			})
		} catch (err) {
			modal.msgError(err)
		}
	}
	const changeDispatch = (e) => {
		showDispatch.value = false
		formData.value.fhdid = e.value
		formData.value.fhdName = e.text
	};

	// 商品运费模板
	const showCarriagePicker = ref(false)
	const carriageList = ref([])
	const showWeightField = computed(() => {
		let isShow = false
		if (formData.value.yfmbid) {
			const carraigeObj = carriageList.value.find(item => item.id === formData.value.yfmbid)
			isShow = carraigeObj && carraigeObj.chargeMode == 22
		}
		return isShow
	})
	const getCarriageList = async () => {
		try {
			await carriageApi.getCarriageList({
				pageNo: 1,
				pageSize: -1,
				supplierId: store.getters.companyId
			}).then(res => {
				if (res.code === 0 && res.data) {
					carriageList.value = res.data.list || []
				} else {
					modal.msgError('获取运费模板数据失败!')
				}
			})
		} catch (err) {
			modal.msgError(err)
		}
	}
	const changeCarriage = (e) => {
		showCarriagePicker.value = false
		formData.value.yfmbid = e.value
		formData.value.yfmbName = e.text
	};

	// 初始化表单数据
	const formData = ref({
		categoryName: '',
		prices: [],
		basics: [],
		sliderPicUrls: [],
		picUrl: [],
	});


	// 选择商品分类
	const changeStatus = (e) => {
    console.log("eeeeeeeeee",e)
		showStatus.value = false;
		formData.value.categoryId = e.value[2];
		formData.value.categoryName = e.text[2];
	};

	// 选择单位
	const changeUnit = (e) => {
		showUnit.value = false;
		formData.value.unit = e.value;
	};

	const productId = ref();
	const userType = ref(1) //供应链是1 供应商是2

	onLoad(async (option) => {
		await getGoodsUnitList()
		await getDispatchList()
		await getCarriageList()
		
		if (option.id) {
			setTitle('编辑商品')
			productId.value = option.id
			store.dispatch('getGoodsDetail', productId.value) //获取详情
		}
		statusList.value = store.getters.productCategoryFormatting; //商品分类列表
		userType.value = store.getters.userType //供应链是1 供应商是2
	});

	// 详情内容赋值
	watch(
		() => store.getters.detailData,
		() => {
			const objData = JSON.parse(JSON.stringify(store.getters.detailData))
			const dispatchObj = dispatchList.value.find(item => item.id === objData.fhdid)
			const carriageObj = carriageList.value.find(item => item.id === objData.yfmbid)
			let costPrice = 0
			if (objData.prices && objData.prices[0]) {
				costPrice = objData.prices[0].costPrice ? objData.prices[0].costPrice / 100 : 0
			}
			formData.value = {
				...objData,
				categoryName: objData.productCategory, //分类名称
				fhdName: dispatchObj ? dispatchObj.deliveryPlace : '',
				yfmbName: carriageObj ? carriageObj.name : '',
				costPrice
			}
		}
	)

	const currPage = ref(0);
	// 继续添加按钮
	const nextPage = async () => {
		const res = await formRef.value.validator(formData.value, step1Rules.value);
		if (res.isPassed) {
			if (!formData.value.yfmbid) {
				modal.msg('请选择商品运费模板！')
				return
			}
			if (showWeightField.value && !formData.value.wlzl) {
				modal.msg('商品运费已选择按重量计费，物流重量不能为空！')
				return
			}
			currPage.value = 1;
		} else {
			modal.msgError(res.errorMsg);
		}
	};

	// 定义验证规则
	const step1Rules = ref([
		{
			name: 'categoryName',
			rule: ['required'],
			msg: ['请选择商品分类']
		},
		{
			name: 'name',
			rule: ['required'],
			msg: ['请输入商品名称']
		},
		{
			name: 'unit',
			rule: ['required'],
			msg: ['请选择单位']
		},
		{
			name: 'fhdid',
			rule: ['required'],
			msg: ['请选择商品发货地']
		},
		{
			name: 'yfmbid',
			rule: ['required'],
			msg: ['请选择商品运费模板']
		},
		{
			name: 'prices',
			rule: ['required'],
			validator: [{
				msg: '请添加价格组',
				method: function() {
					if (formData.value.prices.length < 1) {
						currPage.value = 0;
						return false
					}
					return true
				}
			}]
		},
		{
			name: 'basics',
			rule: ['required'],
			validator: [{
				msg: '请添加商品属性',
				method: function() {
					if (formData.value.basics.length < 1) {
						currPage.value = 0;
						return false
					}
					return true
				}
			}]
		},
	])
	const step2Rules = ref([
		{
			name: 'afterSaleAlert',
			rule: ['required'],
			msg: ['请填写售后须知']
		},
		{
			name: 'tradeAlert',
			rule: ['required'],
			msg: ['请填写交易须知']
		},
		{
			name: 'description',
			rule: ['required'],
			msg: ['请填写商品详情']
		},
		{
			name: 'picUrl',
			rule: ['required'],
			validator: [{
				msg: '请选择商品详情图片',
				method: function(value) {
					if (value.length < 1) {
						return false
					}
					return true
				}
			}]
		},
		{
			name: 'sliderPicUrls',
			rule: ['required'],
			validator: [{
				msg: '请选择上传轮播图',
				method: function(value) {
					if (value.length < 1) {
						return false
					}
					return true
				}
			}]
		},
	])

	// 删除价格组
	const deletePrice = (price) => {
    if (price.id) {
      formData.value.prices = formData.value.prices.filter((item) => item.id !== price.id);
    } else {
      formData.value.prices = formData.value.prices.filter((item) => item.code !== price.code);
    }
	};

	// 删除商品属性
	const deleteBasics = (basic) => {
    if (basic.id) {
      formData.value.basics = formData.value.basics.filter((item) => item.id !== basic.id);
    } else {
      formData.value.basics = formData.value.basics.filter((item) => item.code !== basic.code);
    }
	};

	// 商品详情图片上传
	const uploadedImage = (e) => {
		formData.value.picUrl = e
	}

	// 轮播图
	const uploadedSlideshow = (e) => {
		formData.value.sliderPicUrls = e;
	}

	// 添加价格组
	const isPriceShow = ref(false);
	const addPrice = () => {
		isPriceShow.value = true;
	};

	// 关闭价格组弹窗
	const closePop = (pricesData) => {
    if (pricesData) {
      const hasPriceIndex = formData.value.prices.findIndex(item => item.startNum === pricesData.startNum)
      if (hasPriceIndex > -1) {
        modal.msgError('已存在相同的起购数量，请确认！')
      } else {
        formData.value.prices = [...formData.value.prices, pricesData]
      }
    }
		isPriceShow.value = false;
	};

	// 关闭属性弹窗
	const closeStatsPop = (basicsData) => {
		basicsData ? formData.value.basics = [...formData.value.basics, basicsData] : ''
		isAddStatsShow.value = false;
	};


	// 提交表单方法
	const submit = async () => {
		try {
			// 调用validator方法并传入所需参数
			const res = await formRef.value.validator(formData.value, step2Rules.value);
			if (res.isPassed) {
				const data = {
					...formData.value,
					picUrl: JSON.stringify(formData.value.picUrl),
					specType: false, //规格类型默认传false
					subCommissionType: false, //分销类型 默认传false
					recommendHot: false, //是否热卖推荐
					recommendBenefit: false, //是否优惠推荐
					recommendBest: false, //是否精品推荐
					recommendNew: false, //是否新品推荐
					recommendGood: false, //是否优品推荐
					introduction: "商品简介", //商品简介
					supplierId: store.getters.companyId, //供应商id
					yfmbid: formData.value.yfmbid,
					wlzl:  formData.value.wlzl,
					skus: [{
						price: 1, //价格（单位：分）
						marketPrice: 1, //市场价（单位：分）
						costPrice: 1, //成本价（单位：分）
						barCode: "1", //条形码
						picUrl: "", //商品图片
						stock: 0, //库存
						weight: 0.1, //重量
						volume: 0.1, //体积
						firstBrokeragePrice: 0, //分销暂时不用
						secondBrokeragePrice: 0, //分销暂时不用
						name: formData.value.name //商品名称
					}], //规格信息
				}
				data.prices.forEach(item => {
					item.costPrice = formData.value.costPrice * 100
				})
				// 保存
				updateProduct(data)

			} else {
				modal.msgError(res.errorMsg);
			}
		} catch (err) {
			console.log(err);
		}
	};

	// 判断是新增还是修改
	const updateProduct = (data) => {
		try {
			if (productId.value) {
				// 修改
				goodsApi.updateProduct(data).then((res) => {
					if (res.code === 0) {
						modal.msgSuccess('修改成功');
						store.commit('SET_REFRESH_DETAIL_FLAG', !store.getters.refreshDetailFlag) //刷新详情页
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					} else {
						modal.msgError(res.msg);
					}
				})
			} else {
				// 新增
				goodsApi.addProduct(data).then((res) => {
					if (res.code === 0) {
						modal.msgSuccess('添加成功');
						store.commit('SET_REFRESH_FLAG', !store.getters.refreshFlag)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					} else {
						modal.msgError(res.msg);
					}
				})
			}
		} catch (e) {
			console.log(' updateProduct===>', e);
		}

	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100%;
		padding: 30rpx 36rpx 180rpx;
		box-sizing: border-box;
		overflow-y: auto;
		background: #f8f8f8;
		font-family: PingFang SC, PingFang SC;

		:deep(.fui-form__msg-wrap) {
			z-index: 11000;
		}

		.fui-wrap {
			border-radius: 16rpx;
			overflow: hidden;

			.text {
				margin-bottom: 16rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.categoryName-class {
				:deep(.fui-form__item-outer) {
					margin-bottom: 20rpx !important;
				}
			}


			:deep(.fui-form__item-sizing) {
				width: 200rpx !important;
				font-size: 28rpx !important;
				font-weight: bold !important;
				color: #333333 !important;
			}

			:deep(.fui-input__placeholder) {
				font-size: 28rpx !important;
				color: #999999 !important;
			}

			:deep(.fui-form__item-bottom) {
				right: 1rem !important;
			}

			:deep(.fui-textarea__wrap) {
				padding: 20rpx !important;
				border: 1px solid #dfdfdf !important;
				font-size: 14px !important;
				font-weight: 400 !important;
				color: #999999 !important;
			}

			:deep(.uni-textarea-placeholder) {
				font-size: 14px !important;
			}

			:deep(.fui-textarea__self) {
				height: 130rpx !important;
				min-height: 96rpx !important;
			}

			.form-item1 {
				margin-top: 24rpx !important;
				border-radius: 16rpx !important;
				overflow: hidden;

				.ui-upload-image {
					margin-left: 28rpx;
				}
			}

			.fui-btn__box {
				width: 100%;
				padding: 100rpx 0rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.page-btn {
					height: 88rpx !important;
					line-height: 88rpx !important;
					flex: none;

					:deep(.fui-button__primary) {
						height: 88rpx !important;
						line-height: 88rpx !important;
					}
				}

				.btn-back {
					:deep(.fui-button__primary) {
						background-color: #ffffff !important;
						color: var(--fui-color-primary) !important;
						border: 1px solid var(--fui-color-primary) !important;

						.fui-text__bold {
							color: var(--fui-color-primary) !important;
						}
					}
				}
			}
		}

		.shop-view {
			width: 100%;
			background: #ffffff;
			border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
			padding: 28rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.price-view {
			padding: 24rpx 28rpx 40rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;

			.price-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.price-list {
				background: #f6f6f6;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 24rpx 30rpx 8rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				position: relative;

				.price-list-view {
					min-width: 50%;
					margin-bottom: 20rpx;

					span {
						font-weight: 400;
						color: #999999;
					}

					.price-text {
						color: #666666;
					}
				}

				.price-delete {
					position: absolute;
					right: 20rpx;
					top: 24rpx;
				}
			}
		}

		:deep(.fui-bottom__popup) {
			height: 620rpx;
		}
	}

	/* 固定底部按钮区 */
	.has-fixed-footer {
		padding-bottom: 150rpx;
	}

	.ui-fixed-footer {
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: var(--fui-bg-color-grey);
		padding: 36rpx 36rpx;

		&.ui-fixed-footer__white {
			background-color: var(--fui-bg-color);
		}

		.fui-button__wrap {
			margin-top: 0 !important;
		}
	}

	/* 固定底部按钮区 */
	.has-fixed-footer {
		padding-bottom: 150rpx;
	}

	.ui-fixed-footer {
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: var(--fui-bg-color-grey);
		padding: 36rpx 36rpx;
		display: flex;
		justify-content: space-between;

		&.ui-fixed-footer__white {
			background-color: var(--fui-bg-color);
		}

		.fui-button__wrap {
			margin-top: 0 !important;
		}

		.page-btn {
			width: calc(50% - 16rpx) !important;
			height: 88rpx !important;
			line-height: 88rpx !important;
			flex: none;

			:deep(.fui-button__primary) {
				height: 88rpx !important;
				line-height: 88rpx !important;
			}
		}

		.btn-back {
			:deep(.fui-button__primary) {
				background-color: #ffffff !important;
				color: var(--fui-color-primary) !important;
				border: 1px solid var(--fui-color-primary) !important;

				.fui-text__bold {
					color: var(--fui-color-primary) !important;
				}
			}
		}


	}
</style>